<template>
	<view>
		<view class="header-ttop">
			<view @click="angotu">
				<i class="uni-btn-icon" style="color: rgb(255, 255, 255); font-size: 27px;"></i>
			</view>

			<view @click="show=true">
				<view>
					{{lo.titleList[3].text}}
				</view>
				<view>
					<i class="uni-btn-icon" style="color: rgb(255, 255, 255); font-size: 12px;"></i>
				</view>
			</view>
		</view>
		<u-mask :show="show" @click="show=false">

			<view class="wrao-foofff">
				<view class="wraps">

				</view>
				<view class="warp">
					<view @click="addgose(i)" :class="{'boortttom':i<=3}" v-for="(c,i) in lo.titleList" :key="i" :style="{'background-color':i==3?'#EEEEEE':'#fff',
					'font-weight': i==3?'bold':''}">
						<view class="leftssss" v-if="i==3">

						</view>

						{{c.text}}

					</view>


				</view>
			</view>

		</u-mask>

		<view class="header">
			<u-dropdown menu-icon="arrow-down-fill" menu-icon-size="12" title-size="24" active-color="#3458A2"
				height="100" :border-bottom="true">
				<u-dropdown-item v-for="(c,i) in listTop" :key="i" :title="c.text" v-show="i<=0">
				</u-dropdown-item>
			</u-dropdown>
		</view>

		<view class="center-list">
			<view>
				债券余额
			</view>
			<view>
				678亿
			</view>
			<view>
				（境内债券余额482亿境外债券余额196亿）
			</view>
		</view>


		<view class="footer-list">

			<view class="footer-list-s" v-for="(c,i) in keylist" :key="i">

				<view class="footer-list-s-header">

					<view>
						<image src="../../index/imgs/financing/zuo1.png" mode=""></image>

					</view>
					<view>
						{{c.title}}
					</view>
					<view>
						<image src="../../index/imgs/financing/you1.png" mode=""></image>
					</view>

				</view>


				<view class="footer-list-s-center">
					<view :class="c.class">
						<qiun-data-charts :type="c.ss" :chartData="c.chartData" :errorShow="false" :echartsApp="true"
							:inScrollView="true" :disableScroll="true" background="none" :opts="c.list" />
					</view>
				</view>


			</view>

		</view>

		<view class="footer-footer">
			<view class="footer-footer-header">
				<view>明细表</view>
				<view>（单位：亿元）</view>
				<view>
					<i class="el-icon-crop"></i>
				</view>
			</view>
		</view>


	<view class="footeraaaaaaaaaaa">
			<el-table :data="tableData" :cell-style="cellStyle" :header-cell-style="tableHeaderColor">
				<el-table-column prop="area_ORG_NAME" label="债券类型" width="100">
				</el-table-column>
				<el-table-column prop="bank" label="债券代码" width="100">
				</el-table-column>
				<el-table-column width="100" prop="loan_WAY" label="币种">
				</el-table-column>
				<el-table-column width="100" prop="address1" label="发行时间">
				</el-table-column>
				<el-table-column width="100" prop="koujing_FLAG" label="期限">
				</el-table-column>
				<el-table-column width="100" prop="f_VALUE" label="发行票息">
				</el-table-column>
			</el-table>

		</view>


	</view>
</template>

<script>
	import lo from '../lo.js'
	import listd from './index.js'
	export default {
		data() {
			return {
				lo: lo,
				listd: listd,
				show: false,
				listTop: [{
					text: '截止日期',
					fel: false
				}],
				keylist: [{
						// chartData1  opions1
						title: '集团融资债券发行&存续金额',
						list: listd.opions1,
						chartData: listd.chartData1,
						ss: 'column',
						class: 'charts-box'
					},
					{
						title: '集团融资现存债券到期分布',
						list: listd.opions2,
						chartData: listd.chartData2,
						ss: 'bar',
						class: 'charts-box2'
					},
					{
						title: '集团融资境内债券银行累计认购金额',
						list: listd.opions3,
						chartData: listd.chartData3,
						ss: 'bar',
						class: 'charts-box3'
					}
				]
			};
		},
		methods: {
			addgose(i) {
				if (i == 0) {
					uni.navigateTo({
						url: '../fianci1/fianci1'
					})
				}
				if (i == 1) {
					uni.navigateTo({
						url: '../fianci2/fianci2'
					})
				}
				if (i == 2) {
					uni.navigateTo({
						url: '../fianci3/fianci3'
					})
				}
				if (i == 3) {

				}

			},
			angotu() {
				uni.navigateBack()
			}
		}
	}
</script>
<style scoped src="../../css/css1-10/financingTHeader.min.css"></style>
<style lang="scss" scoped>

		.footer-list-s {
			.footer-list-s-center {
				width: 100vw;

				.charts-box {
					width: 100%;
					height: 100%;
					border-bottom: 1upx solid #EEEEEE;
					padding: 0 0 20upx 0;
				}

				.charts-box2 {
					width: 100%;
					height: 634upx;
					border-bottom: 1upx solid #EEEEEE;
					padding: 0 0 20upx 0;
				}

				.charts-box3 {
					width: 100%;
					height: 576upx;
					border-bottom: 1upx solid #EEEEEE;
					padding: 0 0 20upx 0;
				}
			}
		}
	
	.header {

		/deep/.u-dropdown__menu__item[data-v-01c0c507] {
			justify-content: space-between !important;
			padding: 0 10upx !important;
		}

	}
	
</style>
